import * as THREE from "three";
// Import OrbitControls
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// Updated RGBELoader import path
import { HDRLoader } from "three/addons/loaders/HDRLoader.js";
export const threeD = () => {
	// Target: Load HDR environment map
	// Initialize renderer
	const renderer = new THREE.WebGLRenderer({
		antialias: false,
		// 开启抗锯齿
		powerPreference: "high-performance",
		// 开启透明度
		alpha: false,
		canvas: document.getElementById("map") as HTMLCanvasElement,
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.outputColorSpace = THREE.SRGBColorSpace;

	// 创建场景
	const scene = new THREE.Scene();
	// scene.background = new THREE.Color(0x003261); // Set background color to blue

	// 创建相机
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 10);

	scene.add(camera);

	// 创建球
	// const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
	// const material = new THREE.MeshStandardMaterial({
	// 	metalness: 0.7, // 材质的金属度
	// 	roughness: 0.1, // 材质的粗糙度
	// });
	// const sphere = new THREE.Mesh(sphereGeometry, material);
	// scene.add(sphere);
	// 创建一个居中平放在空间的长方形平面

	const planeGeometry = new THREE.PlaneGeometry(10, 10); // 长方形平面的宽度和高度
	const planeMaterial = new THREE.MeshStandardMaterial({
		color: 0xffffff,
		metalness: 0.7, // 材质的金属度
		roughness: 0.1, // 材质的粗糙度
	});
	const plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.rotation.x = -Math.PI / 2; // 使平面垂直于场景
	scene.add(plane);
	// 在长方形平面上画 交错复杂的线，线上有很多点， 线要在平面上贴合
	for (let i = 0; i < 10; i++) {
		for (let j = 0; j < 10; j++) {
			const lineGeometry = new THREE.BufferGeometry();
			const lineMaterial = new THREE.LineBasicMaterial({
				color: 0xffffff,
			});
			const points = [];
			points.push(new THREE.Vector3(i * 10, 0, j * 10));
			points.push(new THREE.Vector3(i * 10, 0, (j + 1) * 10));
			lineGeometry.setFromPoints(points);
			const line = new THREE.Line(lineGeometry, lineMaterial);
			plane.add(line); // 将线路径添加到平面上
		}
	}

	// Lights
	// const light = new THREE.AmbientLight(0xffffff, 0.5);
	// scene.add(light);
	// const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
	// directionalLight.position.set(10, 10, 10);
	// scene.add(directionalLight);

	// Load HDR environment map using PMREMGenerator
	const pmremGenerator = new THREE.PMREMGenerator(renderer);
	pmremGenerator.compileEquirectangularShader(); // 编译环境贴图的着色器

	new HDRLoader().load("/3d/plains_sunset_4k.hdr", (texture) => {
		const envMap = pmremGenerator.fromEquirectangular(texture).texture; // 从环境贴图创建环境贴图
		scene.background = envMap; // 设置场景的背景为环境贴图
		scene.environment = envMap; // 设置场景的环境贴图
		texture.dispose();
		pmremGenerator.dispose();
	});

	// Create orbit controls
	const controls = new OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true;

	function render() {
		controls.update();
		renderer.render(scene, camera);
		requestAnimationFrame(render);
	}
	render();

	// Handle window resize
	window.addEventListener("resize", () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.setPixelRatio(window.devicePixelRatio);
	});
};
